<!--招聘管理-岗位模板-->
<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>招聘管理 > 岗位模板设置</el-breadcrumb-item>
    </el-breadcrumb>
<!--    <div class="option-box">-->
<!--      <span>套餐类型：<el-select v-model="type.value" size="small" placeholder="请选择" style="width: 12%">-->
<!--          <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value" />-->
<!--        </el-select></span>-->
<!--      <span>限时特惠：<el-select v-model="busState.value" size="small" placeholder="请选择" style="width: 12%">-->
<!--          <el-option v-for="item in busState" :key="item.value" :label="item.label" :value="item.value" />-->
<!--        </el-select></span>-->
<!--      <span>状态：<el-select v-model="checkState.value" size="small" placeholder="请选择" style="width: 12%">-->
<!--          <el-option v-for="item in checkState" :key="item.value" :label="item.label" :value="item.value" />-->
<!--        </el-select></span>-->
<!--      <el-button type="primary" size="small" @click="">搜索</el-button>-->
<!--      <el-button size="small" @click="">重置</el-button>-->
<!--    </div>-->
    <div class="addTc">
      <el-button type="primary" @click="addTc">+创建岗位模板</el-button>
    </div>
    <hr>
    <el-table size="small" :data="tableDate" border style="width: 100%">
      <el-table-column label="序号" type="index" align="center"></el-table-column>
      <el-table-column prop="gwtc_name" label="岗位名称" width="200px" />
      <el-table-column prop="gwtc_num" label="岗位类别" width="400px" />
      <el-table-column prop="gwtc_price" label="薪资范围" width="200px" />
      <el-table-column prop="gwtc_oneprice" label="经验要求" width="200px" />
<!--      <el-table-column prop="gwtc_state" label="审核状态" width="150px">-->
<!--        <template v-slot="scope">-->
<!--          {{ scope.row.gwtc_state === 1 ? '待审核' : scope.row.gwtc_state === 2 ? '审核通过' : scope.row.gwtc_state }}-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column prop="user_code" label="操作" width="220px">
        <template v-slot="scope">
<!--          <el-button size="mini" type="danger" @click="tcPublicc(scope.$index, scope.row)">发布</el-button>-->
          <el-button size="mini" type="danger" @click="tcEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" @click="tcDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--添加套餐的弹窗 -->
    <el-dialog :title="title" :visible.sync="addFormVisible" :data="formDate" width="50%" @click="closeDialog('addForm')">
      <el-form label-width="120px" :model="editDate" :rules="rules"  ref="addForm">
        <el-form-item label="岗位名称：" :required="true" prop="tcNumber">
          <el-input size="small" v-model="formDate.tcNumber" auto-complete="off" placeholder="请输入岗位名称" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="岗位类别："  prop="tcType">
          <el-select v-model="formDate.tcType" size="small" placeholder="请选择" style="width: 500px">
            <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="薪资范围："  prop="tcType">
          <el-select v-model="formDate.tcType" size="small" placeholder="请选择" style="width: 500px">
            <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="经验范围："  prop="tcType">
          <el-select v-model="formDate.tcType" size="small" placeholder="请选择" style="width: 500px">
            <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="岗位职责："  prop="deptNo">
          <el-input type="textarea" size="small" v-model="formDate.thSalar" auto-complete="off" placeholder="请输入岗位职责" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="任职要求："  prop="deptNo">
          <el-input type="textarea" size="small" v-model="formDate.thSalar" auto-complete="off" placeholder="请输入任职要求" style="width: 500px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog('addForm')">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="saveForm('addForm')">保存</el-button>
<!--        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('addForm')">发布</el-button>-->
      </div>
    </el-dialog>
    <!--添加弹窗界面结束 -->

    <!--编辑套餐的弹窗 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" :data="editDate" width="50%" @click="closeDialog('editForm')">
      <el-form label-width="120px" :model="editDate" :rules="rules"  ref="addForm">
        <el-form-item label="岗位名称：" :required="true" prop="tcNumber">
          <el-input size="small" v-model="formDate.tcNumber" auto-complete="off" placeholder="请输入岗位名称" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="岗位类别："  prop="tcType">
          <el-select v-model="formDate.tcType" size="small" placeholder="请选择" style="width: 500px">
            <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="薪资范围："  prop="tcType">
          <el-select v-model="formDate.tcType" size="small" placeholder="请选择" style="width: 500px">
            <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="经验范围："  prop="tcType">
          <el-select v-model="formDate.tcType" size="small" placeholder="请选择" style="width: 500px">
            <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="岗位职责："  prop="deptNo">
          <el-input type="textarea" size="small" v-model="formDate.thSalar" auto-complete="off" placeholder="请输入岗位职责" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="任职要求："  prop="deptNo">
          <el-input type="textarea" size="small" v-model="formDate.thSalar" auto-complete="off" placeholder="请输入任职要求" style="width: 500px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog('editForm')">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="saveForm('editForm')">保存</el-button>
<!--        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">发布</el-button>-->
      </div>
    </el-dialog>
    <!--编辑弹窗界面结束 -->
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import {creategwtc, querygwtc, updategwtc} from '../../api/InstitutionApi'

export default defineComponent({
  name: "Management",
  data() {
    return {
      type: [
        {
          value: '套餐数量包',
          label: '套餐数量包'
        }, {
          value: '不退',
          label: '不退'
        },
      ],
      busState: [
        {
          value: '营业中',
          label: '营业中'
        }, {
          value: '已注销',
          label: '已注销'
        },
      ],
      checkState: [
        {
          value: '待审核',
          label: '待审核',
          style: 'color:"yellow"'
        },
        {
          value: '未通过',
          label: '未通过',
          style: 'color:"red"'
        },
        {
          value: '已入驻',
          label: '已入驻'
        },
      ],
      source: [
        {
          value: '自行申请-小程序',
          label: '自行申请-小程序'
        },
        {
          value: '推广员申请-小程序',
          label: '推广员申请-小程序'
        }
      ],
      authentication: [
        {
          value: '已认证',
          label: '已认证'
        },
        {
          value: '未认证',
          label: '未认证'
        }
      ],
      promotion: [],
      editFormVisible:false,
      addFormVisible: false,
      tableDate: [],// 列表存储具体数据
      editDate: [],  ////编辑某条套餐时存储
      editAddStatus: 'add',
      // 弹窗界面
      formDate:{
        tcType:'',  //套餐类型
        tcNumber: '', ///简历份数
        tcSalar: 0, ///简历价格
        thSalar: 0, ///特惠价格
        xsTime: [], ///限时
        tkType: '' ///退款类型
      },
      editTimevalue:[],
      rules:{
        tcNumber: [
          {  required: true, message: '不能为空', trigger: 'blur' }
        ],
        tcSalar:[
          {  required: true, message: '不能为空', trigger: 'blur' }
        ],

      }
    }
  },

  created() {
    // 获取简历岗位套餐
    this.getdata()
  },

  methods: {
    getdata() {
      querygwtc({
        qwtccode:'',
        qwtcstate:''
      }).then(res => {
        this.tableDate = res.data.data.base_info;
        console.log('企业信息-job：', res);
      })
    },
    // 查看岗位
    jobSelect(index, row) {
      this.editFormVisible = true;
      // console.log('查看：',flowid)
      // 跳转页面的三种方式
      // 方式1：通过 path 跳转
      // this.$router.push({
      //   path: `/enterprises/EnEdit/:index`
      // });
      // 方式2：通过 name 跳转（推荐）
      // this.$router.push({
      //   name: 'enedit',
      //   params: { index: index }
      // });
      // 方式3：带查询参数（显示在URL中）
      // this.$router.push({
      //   path: '/recruitManage/jobDetails',
      //   query: { joblist: row }
      // });
    },
    // 删除套餐
    tcDelete(index, row) {

    },
    // 编辑套餐
    tcEdit(index, row) {
      this.editDate = row
      this.editTimevalue= []
      this.editTimevalue.push(this.editDate.gwtc_onestart)
      this.editTimevalue.push(this.editDate.gwtc_oneend)
      console.log('编辑：',this.editDate)
      this.editFormVisible = true;
    },
    // 添加套餐
    addTc() {
      this.addFormVisible = true;
    },
    // 关闭弹窗
    closeDialog(value) {
      if(value == 'addForm') {
        this.addFormVisible = false;
      } else if (value == 'editForm') {
        this.editFormVisible = false;
      }

    },
    // 发布时操作
    submitForm(value) {
      if (this.formDate.tcSalar != '' && value == 'addForm') {
        // 转换时间：
        let startTime = this.formatDate(this.formDate.xsTime[0]);
        let endTime = this.formatDate(this.formDate.xsTime[1]);
        // // 调用保存简历套餐接口
        creategwtc({
          "gwtcname": this.formDate.tcType, ///#套餐类型名称
          "gwtcdetail": this.formDate.tkType,///#套餐说明
          "gwtcnum": this.formDate.tcNumber, //#套餐数量
          "gwtcprice": this.formDate.tcSalar,///#套餐价格
          "gwtconeprice": this.formDate.thSalar,///#特惠价格
          "gwtconestart": startTime,///#特惠价格开始日期
          "gwtconeend": endTime, ///#特惠价格结束日期
          "gwtcstate":"1"  //状态，0仅保存，1发布
        }).then(res => {
          console.log('简历套餐：', res)
          this.addFormVisible = false;
        })
      } else if (this.editDate.tcSalar != '' && value == 'editForm') {
        // 转换时间：
        let editstartTime = this.formatDate(this.editTimevalue[0]);
        let editendTime = this.formatDate(this.editTimevalue[1]);
        updategwtc({
          "gwtccode":this.editDate.gwtc_code,//#套餐类型id
          "gwtcname":this.editDate.gwtc_name,//#套餐类型名称
          "gwtcdetail":this.editDate.gwtc_detail,//#套餐说明
          "gwtcnum": this.editDate.gwtc_num,//#套餐数量
          "gwtcprice": this.editDate.gwtc_price,//#套餐价格
          "gwtconeprice": this.editDate.gwtc_oneprice,//#特惠价格
          "gwtconestart": editstartTime,//#特惠价格开始日期
          "gwtconeend": editendTime,//#特惠价格结束日期
          "gwtcstate":"1"//#状态，0仅保存，1发布
        }).then(res => {
          this.editFormVisible = false;
          console.log(res)
        })

      } else {
        // 提示
        this.$message({
          message: '请正确填写',
          type: 'warning',
          duration: 2000
        })
      }
    },

    // 仅保存的操作
    saveForm(value){
      if (this.formDate.tcSalar != '' && value == 'addForm') {
        // 转换时间：
        let startTime = this.formatDate(this.formDate.xsTime[0]);
        let endTime = this.formatDate(this.formDate.xsTime[1]);
        // // 调用保存简历套餐接口
        creategwtc({
          "gwtcname": this.formDate.tcType, ///#套餐类型名称
          "gwtcdetail": this.formDate.tkType,///#套餐说明
          "gwtcnum": this.formDate.tcNumber, //#套餐数量
          "gwtcprice": this.formDate.tcSalar,///#套餐价格
          "gwtconeprice": this.formDate.thSalar,///#特惠价格
          "gwtconestart": startTime,///#特惠价格开始日期
          "gwtconeend": endTime, ///#特惠价格结束日期
          "gwtcstate":"0"  //状态，0仅保存，1发布
        }).then(res => {
          console.log('简历套餐：', res)
          this.addFormVisible = false;
        })
      } else if (this.editDate.tcSalar != '' && value == 'editForm') {
        // 转换时间：
        let editstartTime = this.formatDate(this.editTimevalue[0]);
        let editendTime = this.formatDate(this.editTimevalue[1]);
        updategwtc({
          "gwtccode":this.editDate.gwtc_code,//#套餐类型id
          "gwtcname":this.editDate.gwtc_name,//#套餐类型名称
          "gwtcdetail":this.editDate.gwtc_detail,//#套餐说明
          "gwtcnum": this.editDate.gwtc_num,//#套餐数量
          "gwtcprice": this.editDate.gwtc_price,//#套餐价格
          "gwtconeprice": this.editDate.gwtc_oneprice,//#特惠价格
          "gwtconestart": editstartTime,//#特惠价格开始日期
          "gwtconeend": editendTime,//#特惠价格结束日期
          "gwtcstate":"0"//#状态，0仅保存，1发布
        }).then(res => {
          this.editFormVisible = false;
          console.log(res)
        })

      } else {
        // 提示
        this.$message({
          message: '请正确填写',
          type: 'warning',
          duration: 2000
        })
      }
    },


    // 时间格式处理
   formatDate(DateTime) {
    // 1. 将字符串转为 Date 对象
    const date = new Date(DateTime);
    // 2. 提取年、月、日（注意月份要 +1）
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 补零
    const day = String(date.getDate()).padStart(2, '0');      // 补零
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');

    // 3. 拼接成目标格式
    const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    return formattedDate
  }


  },
})
</script>



<style scoped>
.option-box {
  margin-top: 1%;

  span {
    margin-left: 1%;
  }

  .el-button {
    width: 5%;
  }
}

.addTc {
  margin: 10px 0 ;
}

.el-table {
  margin-top: 1%;
}

.el-pagination {
  margin-top: 1%;
  float: right;
}
</style>
